<!-- Created by henian.xu on 2018/11/16. -->

<template>
    <div
        class="prop-picker"
        v-show="selfShow">
        <!--brand-->
        <div
            class="prop-list"
            v-if="brandList.length && !selectBrandList.length">
            <div class="label">品牌:</div>
            <div class="inner">
                <div
                    class="item img"
                    v-for="(item) in brandList"
                    :style="`background-image: url('${item.brandLogoUrl}');`"
                    :key="item.id"
                    @click="onBrandItem(item)"/>
            </div>
        </div>
        <!-- normal -->
        <div
            class="prop-list"
            v-for="(prop) in goodsPropValueList"
            :key="prop.pid">
            <div class="label">{{ prop.pn }}:</div>
            <div class="inner">
                <div
                    class="item"
                    v-for="(v) in prop.v"
                    :key="v.vid"
                    @click="onVItem(prop.pid,v)">{{ v.vn }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PropPicker',
    data() {
        return {
            brandList: [],
            selectBrandList: [],
            goodsPropValueList: [],
            selectGoodsPropValueList: [],
        };
    },
    props: {
        value: {
            type: Object,
            default() {
                return {};
            },
        },
        catId: {
            type: Number,
            default: 0,
        },
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        selfShow() {
            return (this.brandList.length && !this.selectBrandList.length) || this.goodsPropValueList.length;
        },
        brandIds() {
            return this.$route.query.brandIds || '';
        },
        propValue() {
            return this.$route.query.propValue || '';
        },
        propValueList() {
            if (!this.propValue) return [];
            const res = [];
            const props = this.propValue.split(',');
            props.forEach(prop => {
                // 5-8|9,3-1|2
                if (!prop) return;
                const obj = {};
                const propArr = prop.split('-');
                obj.pid = +propArr[0];
                const vArr = propArr[1].split('|');
                obj.v = vArr.reduce((p, c) => (p.push(+c), p), []);
                res.push(obj);
            });
            return res;
        },
    },
    methods: {
        getGoodsBrandList({ virtualCatId = this.catId, propValue } = {}) {
            this.$axios.get('/rpc/buyer/gd/goods/goodsBrandList', { virtualCatId, propValue }).then(json => {
                this.brandList = json.data.data;
            });
        },
        /**
         * get
         * @param virtualCatId
         * @param propValue     属性-属性值,属性-属性值|属性值
         * @param brandIds
         */
        getGoodsPropValueList({
            virtualCatId = this.catId,
            brandIds = this.brandIds,
            propValue = this.propValue,
        } = {}) {
            this.$axios
                .get('/rpc/buyer/gd/goods/goodsPropValueList', {
                    virtualCatId,
                    brandIds,
                    propValue,
                })
                .then(json => {
                    const res = json.data.data;
                    this.goodsPropValueList = res.goodsPropValueList;
                    this.selectGoodsPropValueList = res.selectGoodsPropValueList;
                    this.selectBrandList = res.selectBrandList;
                    this.model = {
                        selectBrandList: res.selectBrandList,
                        selectGoodsPropValueList: res.selectGoodsPropValueList,
                    };
                });
        },
        onBrandItem(item) {
            console.log(item);
            this.$utils.Comm.gotoUrl({
                query: {
                    brandIds: item.id,
                },
            });
        },
        onVItem(pid, v) {
            const propList = JSON.parse(JSON.stringify(this.propValueList));
            // const currProp = propList.find(item => item.pid === pid);
            propList.push({ pid, v: [v.vid] });
            this.$utils.Comm.gotoUrl({
                query: {
                    propValue: propList.map(prop => `${prop.pid}-${prop.v.join('|')}`).join(','),
                },
            });
        },
    },
    mounted() {
        this.getGoodsBrandList();
        this.getGoodsPropValueList();
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';

.prop-picker {
    background-color: #fff;
    padding: $padding;
    border: 1px solid $color-border;
    margin: $margin 0;
}

.prop-list {
    padding: $padding 0;
    line-height: 30px;
    @include clearfix;

    + .prop-list {
        border-top: 1px dashed $color-border;
    }

    > .label {
        float: left;
        width: 100px;
    }
    > .inner {
        overflow: hidden;
        @include clearfix;
        > .item {
            float: left;
            white-space: nowrap;
            padding: 0 $padding;
            cursor: pointer;

            &:hover {
                color: $color-main;
            }

            &.img {
                width: 116px;
                height: 48px;
                background: center no-repeat;
                background-size: cover;
                border: 1px solid $color-border;
            }
        }
    }
}
</style>
